<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	//指定根路径  127.0.0.1：8080/crm
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
	<base href=<%=basePath%>>
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

<script type="text/javascript">

	$(function(){
		const PAGE_SIZE = 3;

		//点击创建按钮  绑定事件
		$("#open_model_btn").click(function () {



			//jquery不提供form的reset函数  需要使用原生js自带的
			$("#add_activity_form").get(0).reset();

			//1.获取所有的用户列表
			$.ajax({
				url : "workbench/activity/getUserList.do",
				dataType : "json",
				type : "post",
				success : function (data) {	//2.加到下拉菜单中
					let html = ""
					$.each(data, function (i, n) {
						html += "<option value = '" + n.id +"'> " + n.name + "</option>";
					})

					$("#create-marketActivityOwner").html(html);

					//默认选当前用户
					$("#create-marketActivityOwner").val("${sessionScope.user.id}")

					//3.显示模态窗口
					$("#createActivityModal").modal("show");
				}
			})

		})

		//点击保存按钮  绑定事件
		$("#add_activity_btn").click(function () {
			//判断必要字段是否已填
			let owner_id = $.trim($("#create-marketActivityOwner").val());
			let act_name = $.trim($("#create-marketActivityName").val());
			let s_time = $.trim($("#create-startTime").val());
			let e_time = $.trim($("#create-endTime").val());
			let cost = $.trim($("#create-cost").val());
			let describe = $.trim($("#create-describe").val());

			if(act_name == "" || s_time == "" || e_time == ""){
				alert("必要字段不可为空！");
			}
			else{
				$.ajax({
					url : "workbench/activity/addActivity.do",
					data : {
						owner : owner_id,
						name : act_name,
						startDate : s_time,
						endDate : e_time,
						cost : cost,
						description : describe
					},
					dataType: "json",
					type: "post",
					success : function (data) {
						//data : {"success":true}
						if(data.success){
							//做完添加操作后，应该回到第一页，维持每页展现的记录数
							pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
							$("#createActivityModal").modal("hide");
						}
						else{
							alert("添加失败！");
						}
					}
				})
			};
		})

		//加载后动态显示列表、分页栏
		pageList(1, PAGE_SIZE);

		//为查询按钮绑定事件，触发pageList方法
		$("#search_btn").click(function () {
			//保存查询的数据到隐藏窗口
			$("#hidden_name").val($.trim($("#search_name").val()));
			$("#hidden_owner").val($.trim($("#search_owner").val()));
			$("#hidden_startDate").val($.trim($("#search_startTime").val()));
			$("#hidden_endDate").val($.trim($("#search_endTime").val()));
			pageList(1,PAGE_SIZE);
		})

		//全选框绑定事件  触发全选
		$("#qx").click(function () {
			$("input[name=xz]").prop("checked",this.checked);
		})

		//生成的复选框绑定事件 ： 使用  $(需要绑定元素的有效的外层元素).on(绑定事件的方式,需要绑定的元素的jquery对象,回调函数)
		$("#search_table").on("click",$("input[name=xz]"),function () {
			$("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);
		})

		//查询框的日期栏绑定日历
		$(".text_time").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
			autoclose: true,
			todayBtn: true,
			pickerPosition: "bottom-left"
		});
		$(".time").datetimepicker({	//为class = time的时间input绑定bootstrap框架的datetimepicker
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
			autoclose: true,
			todayBtn: true,
			pickerPosition: "bottom-left"
		});

		//删除按钮绑定事件
		$("#delete_btn").click(function () {
			//找到复选框中所有选中的复选框的jquery对象
			let $xz = $("input[name=xz]:checked");
			if($xz.length==0){
				alert("请选择需要删除的记录");
			}
			else{
				if(confirm("确认删除这条记录吗？")){
					//拼接参数
					let param = "";
					//将$xz中的每一个dom对象遍历出来，取其value值
					for(let i=0; i<$xz.length; i++){
						param += "id="+$($xz[i]).val();
						if(i<$xz.length-1){
							param += "&";
						}
					}
					// alert(param);
					$.ajax({
						url : "workbench/activity/delete.do",
						data : param,
						type : "post",
						dataType : "json",
						success : function (data) {
							if(data.success){
								//删除成功后
								//回到第一页，维持每页展现的记录数
								pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
							}else{
								alert("删除市场活动失败");
							}
						}
					});
				}
			}
		})

		//修改活动按钮绑定事件  打开模态窗口
		$("#update_btn").click(function () {
			let $xz = $("input[name=xz]:checked");
			if($xz.length==0){
				alert("请选择需要修改的记录");
			}else if($xz.length>1){
				alert("只能选择一条记录修改");
			}else{
				let id = $xz.val();
				$.ajax({
					url : "workbench/activity/getUserListAndActivity.do",
					data : {"id" : id},
					type : "post",
					dataType : "json",
					success : function (data) {
						/*
						data : {"uList" : userList, "a" : {...}}
						 */
						//处理所有者下拉框
						let html = "";
						$.each(data.uList, function (i, n) {
							html += "<option value='"+n.id+"'>"+n.name+"</option>";
						})
						$("#edit-owner").html(html);

						//处理单条activity
						$("#edit-id").val(data.a.id);
						$("#edit-name").val(data.a.name);
						$("#edit-owner").val(data.a.owner);
						$("#edit-startDate").val(data.a.startDate);
						$("#edit-endDate").val(data.a.endDate);
						$("#edit-cost").val(data.a.cost);
						$("#edit-description").val(data.a.description);

						//所有的值都填写好之后，打开修改操作的模态窗口
						$("#editActivityModal").modal("show");
					}
				});
			}
		})


		//为修改按钮绑定事件  发送修改请求
		$("#updateBtn").click(function () {
			$.ajax({
				url : "workbench/activity/update.do",
				data : {
					"id" : $.trim($("#edit-id").val()),
					"owner" : $.trim($("#edit-owner").val()),
					"name" : $.trim($("#edit-name").val()),
					"startDate" : $.trim($("#edit-startDate").val()),
					"endDate" : $.trim($("#edit-endDate").val()),
					"cost" : $.trim($("#edit-cost").val()),
					"description" : $.trim($("#edit-description").val())
				},
				type : "post",
				dataType : "json",
				success : function (data) {
					/*
						data  : {"success":true/false}
					 */
					if (data.success) {
						//修改成功后
						//修改操作后，应该维持在当前页，维持每页展现的记录数
						pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
								, $("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
						//关闭修改操作的模态窗口
						$("#editActivityModal").modal("hide");
					} else {
						alert("修改市场活动失败");
					}
				}
			})
		});
	})


	//分页显示活动列表
	pageList = function (pageNum, pageSize) {

		//全选复选框确保取消选择
		$("#qx").prop("checked",false);

		//把隐藏窗口保存的信息读取到搜索栏上
		$("#search_name").val($.trim($("#hidden_name").val()));
		$("#search_owner").val($.trim($("#hidden_owner").val()));
		$("#search_startTime").val($.trim($("#hidden_startDate").val()));
		$("#search_endTime").val($.trim($("#hidden_endDate").val()));


		$.ajax({	//searchActivity
			url : "workbench/activity/searchActivity.do",
			data : {
				"pageNum":pageNum,
				"pageSize":pageSize,
				"name":$.trim($("#search_name").val()),
				"owner":$.trim($("#search_owner").val()),
				"startDate":$.trim($("#search_startTime").val()),
				"endDate":$.trim($("#search_endTime").val())
			},
			dataType : "json",
			type : "post",
			success : function (data) {
				let html = "";
				$.each(data.dataList, function (i, n) {
					html += '<tr class="active">';
					html += '<td><input type="checkbox" name="xz" value="'+n.id+'"/></td>';
					html += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id='+n.id+'\';">'+n.name+'</a></td>';
					html += '<td>'+n.owner+'</td>';
					html += '<td>'+n.startDate+'</td>';
					html += '<td>'+n.endDate+'</td>';
					html += '</tr>';
				})
				$("#search_table").html(html);

				let total_page_num = data.total%pageSize==0? data.total/pageSize : parseInt(data.total/pageSize) + 1;	//总页数

				//分页控件
				$("#activityPage").bs_pagination({
					currentPage: pageNum, // 页码
					rowsPerPage: pageSize, // 每页显示的记录条数
					maxRowsPerPage: 20, // 每页最多显示的记录条数
					totalPages: total_page_num, // 总页数
					totalRows: data.total, // 总记录条数

					visiblePageLinks: 3, // 显示几个卡片

					showGoToPage: true,
					showRowsPerPage: true,
					showRowsInfo: true,
					showRowsDefaultInfo: true,

					//该回调函数时在，点击分页组件的时候触发的
					onChangePage: function (event, data) {
						pageList(data.currentPage, data.rowsPerPage);
					}
				})

			}
		})

	}

</script>
</head>
<body>

	<input type="hidden" id="hidden_name"/>
	<input type="hidden" id="hidden_owner"/>
	<input type="hidden" id="hidden_startDate"/>
	<input type="hidden" id="hidden_endDate"/>

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form" id="add_activity_form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-marketActivityOwner">
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-marketActivityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time"  id="create-startTime">
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-endTime">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="add_activity_btn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<input type="hidden" id="edit-id"/>

							<label for="edit-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-owner">

								</select>
							</div>
                            <label for="edit-name" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-name">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startDate" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-startDate">
							</div>
							<label for="edit-endDate" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-endDate">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateBtn">更新</button>
				</div>
			</div>
		</div>
	</div>

	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="search_name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text " id="search_owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control text_time" type="text " id="search_startTime" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control text_time" type="text" id="search_endTime">
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="search_btn">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="open_model_btn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="update_btn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="delete_btn"><span class="glyphicon glyphicon-minus" ></span> 删除</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="qx"/></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="search_table">

					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div id="activityPage">

				</div>
			</div>
			
		</div>
		
	</div>
</body>
</html>